<template>
    <view>
        <u-navbar title="消息" :placeholder="true" leftIcon="">
        </u-navbar>
        <view class="main">
            <view class="search">
                <u-search placeholder="搜索聊天列表" v-model="keyword"></u-search>
            </view>
            <!-- <view class="adminBox" >
                <view class="left">
                    <image :src="admin.avatar"></image>
                </view>
                <view class="right">
                    <view class="top">
                        <view class="name">{{ admin.name }}</view>
                        <view class="time">{{ dateFormat(admin.time) }}</view>
                    </view>
                    <view class="bottom">
                        <view class="msg">{{ msgFormat(admin.newMessage) }}</view>
                        <view class="unread">
                            <u-badge class="badge" absolute max="99" :value="admin.unreadNum">
                            </u-badge>
                        </view>
                    </view>
                </view>
            </view> -->
            <view class="chatList">
                <view class="adminBox user" @click="goUserChat(index)" v-for="item,index in chatList" :key="index">
                    <view class="left">
                        <image :src="item.avatar"></image>
                    </view>
                    <view class="right">
                        <view class="top">
                            <view class="name">{{ item.name }}</view>
                            <view class="time">{{ dateFormat(item.time) }}</view>
                        </view>
                        <view class="bottom">
                            <view class="msg">{{ msgFormat(item.newMessage) }}</view>
                            <view class="unread">
                                <u-badge class="badge" absolute max="99" :value="item.unreadNum">
                                </u-badge>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

        </view>
        <TabBar :tabIndex="3" :messageNum="9"></TabBar>
    </view>

</template>

<script>
import TabBar from '@/components/tabBar.vue'
import { mapGetters } from 'vuex'
export default {
    components: {
        TabBar
    },
    mounted() {
        console.log(this.$tools.getScreenWidth())
    },
    computed: {
        ...mapGetters(['chatList','admin']),
        msgFormat() {
            return function (msg) {
                // 获取屏幕宽度
                let width = this.$tools.getScreenWidth() / 16 - 3
                // 判断消息长度
                if (msg.length > width) {
                    // 截取消息
                    msg = msg.substring(0, width) + '...'
                }
                return msg

            }
        },
        dateFormat() {
            return function (time) {
                time = new Date(time).getTime();
                let now = new Date().getTime()
                let diff = now - time
                let day = Math.floor(diff / (1000 * 60 * 60 * 24))
                if (day < 1) {
                    return new Date(time).getHours() + ':' + new Date(time).getMinutes()
                }

                else if (day > 1 && day < 2) {
                    return '昨天'
                }
                else {
                    let month = new Date(time).getMonth() + 1
                    return new Date(time).getFullYear() + '-' + month + '-' + new Date(time).getDate()
                }

            }
        }
    },
    data() {
        return {
            keyword: '',
            
        }
    },
    methods:{
        goUserChat(index){
            this.$store.commit('SET_CURRENT_CHAT',index)
            this.$store.dispatch('getOtherInfo',this.chatList[index].id)//将当前选中的聊天列表的id传给store，从服务端获取用户信息
            this.$Router.push({
                name:'chatDetail'
            })
        }
    }

}
</script>

<style lang="scss">
page {
    height: 100%;
    width: 100%;
    background: white;

    .main {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .search {
            margin-top: 0.5rem;
            width: 95%;
        }

        .adminBox {
            background: #eff0f4;
            width: 95%;
            height: 3.5rem;
            margin-top: 0.5rem;
            display: flex;
            flex-direction: row;
            // justify-content: space-between;
            align-items: center;
            padding: 0.5rem;
            // border-radius: 0.5rem;
            border-bottom: 1px solid #e5e5e5;
            // background-color: red;

            .left {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                width: 5rem;
                height: 100%;

                image {
                    width: 3.5rem;
                    height: 3.5rem;
                    border-radius: 50%;
                }
            }


            .right {
                height: 100%;
                display: flex;
                width: 100%;
                flex-direction: column;
                // justify-content: space-between;

                .top {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    height: 2rem;

                    .name {
                        font-size: 1rem;
                        color: #333;
                    }

                    .time {
                        font-size: 0.6rem;
                        color: #999;
                    }
                }

                .bottom {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    height: 2rem;

                    .msg {
                        font-size: 0.8rem;
                        color: #999;
                    }

                    .unread {
                        margin-right: 1.5rem;
                        margin-bottom: 1rem;
                    }
                }

            }
        }

        .user {
            margin-top: 0;
            background: white;
        }
    }
}
</style>